import React, { useMemo } from 'react'
import CityList from '../../../public/cities.json'
import { Tag, IndexBar, List  } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
function Index() {
  console.log(CityList)
  const navigate=useNavigate()
  useMemo((CityList)=>{
     CityList
  })
  return (
    <div>
    <div>
       <span>当前城市:</span>
       <h3>北京</h3>
    </div>
     <div>
       <span>热门城市:</span>
       {
         CityList.hotCities.map((item,index)=>{
          return  <Tag key={index} style={{marginLeft:'10px',marginTop:'10px'}}>
            {item.name}
        </Tag>
         })
        
       }
       
    </div>

    <div style={{height:'100vh'}}>
        <IndexBar>
        {CityList.cityList.map((group,i) => {
          
          return (
            <IndexBar.Panel
              index={group.title}
              title={group.title}
              key={i}
            >
              <List>
                {group.citys.map((item, index) => (
                  <List.Item key={index} onClick={()=>navigate('/train?city='+item.name)}>{item.name}</List.Item>
                ))}
              </List>
            </IndexBar.Panel>
          )
        })}
      </IndexBar>
    </div>
    </div>
  )
}

export default Index
